Mitsuzuka Rintaro
https://scrapbox.io/files/6263ac5220335a001d752574.jpg
三塚 麟太郎
筑波大学情報学群知識情報・図書館学類の3年です
料理とかボードゲームが好きです!
ソロ活動何しようかな
2022/4/22 22:41:00Mitsuzuka Rintaro.icon
pythonを習ったので、pythonのWebアプリケーションフレームワークのDjangoを使って何かつくりたい
自分用のポートフォリオとかWikiとかほしい
あとscrapboxを整理したい
userscriptというのがあるらしい
ノートとかメモみたいに使っていこうかな
ScrapBoxをいろいろいじってみる
2022/4/23 16:03:03Mitsuzuka Rintaro.icon
UserScriptってなんぞやと思ってヘルプを見てみるとなんか怖いことが書いてあった 上級者向け機能
信用のならないScriptや、中身が自分で理解できないScriptは読み込むべきではありません
UserScriptを使うと、ページを削除したり、projectの内容を外部に送信したりする事も可能です
UserScriptを使うと便利な機能が追加できる
探してみるといろいろな人が公開してくださっていた
ページの見出しを使いつつ、
https://scrapbox.io/files/626b685ad21b140023a384b8.gif
日記の日付の部分にしおりをつけて使い分ける
https://scrapbox.io/files/626b68839e8cf300239ffea9.gif
分割線とか入れたらもっと見やすくなるかな、そのうちやってみる
Djangoでブログアプリをつくってみる
2022/4/27 12:34:54Mitsuzuka Rintaro.icon
整理
前回やったこと
scrapboxの全体的なレイアウトを決める
UserScript&UserCSSでよさそうなものの導入
今回やること
Djangoでブログ作ってみる
一人でこっそりgit/githubの練習する
こまめにコミット
Djangoのブログアプリ作成
pipenvのインストール
Pythonで開発するときに,プロジェクト毎のパッケージ管理や仮想環境の構築を簡単に自動で行ってくれるツール
パッケージのインストールならpip,仮想環境の構築ならvirtualenv(venv)を使えば対応できますが,pipenvはそれらをまとめてより簡単に扱えるようにサポート
code:command
pip install pipenv
pipenv shell
後々、Dockerを使うことを考えて、requirements.txt に基づき、モジュールのインストール
code:command
pipenv install -r requirements.txt
manage.pyを実行してDjangoサーバーを起動
Ctrl + Cで終了
アドレスは 127.0.0.1:8000
code:command
python3 manage.py runserver
Djangoのプロジェクトとアプリの違い
プロジェクトとアプリの違いは何でしょうか? アプリとは、ウェブログシステム、公的記録のデータベース、小規模な投票アプリなど、何かを行う Web アプリケーションです。プロジェクトは、特定のウェブサイトの構成とアプリのコレクションです。プロジェクトには複数のアプリを含めることができます。 アプリは複数のプロジェクトに存在できます。
ブログで記事を管理するためには model を作成します。model はデータベースと Django の橋渡しの役割を持っており、これのおかげで我々は SQL といったデータベース構文を意識することなくデータベースにデータを登録することができます。
migrationファイルを使ってデータベースにテーブルを作成
code:command
python3 manage.py migrate
Djangoはデフォルトで管理サイトが用意されている
クラスベース汎用ビューという仕組みを使うと、簡単にmodelを引っ張てきて記事を表示させたり、テンプレートを表示させたりできる。
データをテンプレートに渡す役目
世の中のウェブサイトは
特定の条件下のリスト
DBから記事を絞り込んで表示
単一の記事を表示
何度も同じコードを書かなくてすむように、Djangoに定義
それを、汎用ビュー
関数だと関数ベース汎用ビュー
クラスだとクラスベース汎用ビュー
generic.ListViewではtemplateのファイル名をルールに沿った形にすると明示しなくても呼び出してくれる
model名を小文字にしたもの_(アンダーバー)ListViewならlistという文字列
post_list.html
Djangoのtemplateでは{% %}で囲むことでpythonコードを記述
htmlとしてブラウザに値を表示させるには{{ }}で記述
DjangoではUnitTestクラスを書いてテストを自動化できる
モジュール名はtestで始める
TestCaseクラスを使う
テストメソッドもtestという文字列で始める
forms.pyのfieldsで指定した入力フィールドをformという変数で受け取ることができ、template側ではform.titleとform.textという形で取り出すことができる。
クロスサイトリクエストフォージェリ(CSRF)とは、Webアプリケーションに存在する脆弱性、もしくはその脆弱性を利用した攻撃方法のことです。掲示板や問い合わせフォームなどを処理するWebアプリケーションが、本来拒否すべき他サイトからのリクエストを受信し処理してしまいます。
Django のクラスベース汎用ビューの機能を使うと、urls.py 内でのルーティング設定において各記事のプライマリキーint:pkという文字列で URL パターンを指定することができる
Djangoの便利な機能として共通テンプレートを使う
共通な部分は一つにまとめて
画面ごとに異なる部分は別のtemplateを呼び出す
code:html
href="{% url 'blog:post_list' %}
逆引きようのURLを記述すると/blog/postへリダイレクト
ひとまず完成!
ブログの一覧表示
https://scrapbox.io/files/62691e788a6fc0001d6ddba8.jpg
ブログの投稿画面
https://scrapbox.io/files/62691e70a46c6c001faebc11.jpg
ログイン機能とか見た目をもっと考えたい
もっと詰めたらHerokuなどを使ったデプロイもやってみたい
gitの練習
基本コマンドまとめ
インストールされた Git の確認
code:command
git version
ユーザ名の設定
code:command
git config --global user.name "hogehoge"
メールアドレスの設定
code:command
git config --global user.email test@example.com
設定内容の確認
code:command
git config --list
ローカルリポジトリに追加
code:command
git init
ファイルをステージ
code:command
git add ファイル名
ローカルリポジトリに反映
code:command
git commit -m "コメント"
変更をコミット前に確認
コンフリクトが起きているファイルの確認方法
複数人でファイルを同時に編集しないこと
pull を行う際は、pull をしようとしているブランチに checkout してから pull を行うこと
pull・merge をする前に commit or stash を行い、編集中のファイルを無くす
code:command
git status
プッシュ
code:command
git push origin master
ファイルへの変更を取り消す
code:command
git checkout --test.txt
ステージした変更を取り消す
code:command
git reset HEAD test.txt
ステージした変更を取り消す
code:command
git commit --amend
リモートから取得(すぐマージしない:フェッチ)
code:command
git fetch origin(リモート名)
リモートから取得(すぐマージ:プル)
code:command
git pull origin master
ブランチを追加
code:command
git branch ブランチ名
既存のブランチを切り替える
code:command
git checkout 既存ブランチ名
変更をマージ
code:command
git merge ブランチ名
.gitignoreの書き方
code:.gitignore
# すべての.dbファイルを無視
*.db
# すべての.sqlite3ファイルを無視
*.sqlite3
# bin フォルダは要らない
bin/
# nuget.exe は必用なファイル
!/.nuget/nuget.exe
# パッケージフォルダ内の .ts ファイルは要らない
package/**/*.ts
無視設定を行いたいフォルダにおく
今回あとから追加しちゃったので、設定反映されなかった…
一回外のフォルダに移動させてから、また戻すと反映される!
ブランチの名前で悩んでたら、次の記事を見つけた
table:ブランチの命名規則
ブランチ名 役割 派生先 マージ先
master / main 公開するものを置くブランチ
develop 開発中のものを置くブランチ master master
release 次にリリースするものを置くブランチ develop develop, master
feature- 新機能開発中に使うブランチ develop develop
hotfix- 公開中のもののバグ修正用ブランチ master develop, master
いつも調べるのでメモ
テストとかBootstrapとか
2022/4/29 16:56:19Mitsuzuka Rintaro.icon
整理
前回やったこと
Djangoのブログアプリ作った
一覧、投稿
テスト
Bootstrap使ったフロントエンド
gitについて復習
.gitignoreの書き方
ブランチの命名
今回やること
今週の振り返り
今週の記事の修正&加筆
今週の振り返り
scrapboxの全体的なレイアウトを決める
UserScript&UserCSSでよさそうなものの導入
Djangoのブログアプリ作った
一覧、投稿
テスト
Bootstrap使ったフロントエンド
gitについて復習
gitの基本的なコマンドの振り返り
.gitignoreの書き方
ブランチの命名
来週やること
ブログアプリに機能追加したい!
見た目も整えたい!
アジャイルについて調べる
テストについて調べる
アジャイルを自分なりにまとめてみた
2022/5/11 18:00:00Mitsuzuka Rintaro.icon
整理
前回やったこと
gitの復習
今回やること
アジャイルについて知る
6/3の予習になっていてよかった
アジャイルとは
短いサイクルで開発とリリースを繰り返す
機能追加というよりも成果物が増えていく
ユーザーストーリーマッピング
開発を繰り返すアジャイル開発で、どのように優先順位をつけていくのか
ユーザーストーリーマッピングという手法があった
ユーザーストーリーを時系列と優先度に沿ってマッピングしたものです。
ユーザーストーリーマッピングの活用により、開発順序を適切に定められるため、メンバーにも情報を共有しやすくなります。
やり方
1. 左から右へ書いていく(時間)
2. 上から下へ優先順位高い順に書いていく
(例)
分類:ユーザーは電子メールを管理できる
アクティビティ(タスク):ユーザーは電子メールを作成できる、ユーザーは電子メールを読める、ユーザーは電子メールを削除できる
ユーザーストーリー(機能):ユーザーはプレインテキストの電子メールを送信できる、ユーザーはリッチテキストの電子メールを送信できる、ユーザーはHTMLの電子メールを送信できる
3. そして横に線を引いて最低限の機能群(MVP)を決める
自分がやりやすいと思った流れ
1. ペルソナを決めとく
サービス・商品の典型的なユーザー像のことで、マーケティングにおいて活用される概念
氏名
年齢
職業
住所
家族構成
年収
ライフスタイル
性格
価値感
悩み
使用しているSNS
2. ストーリーに沿ってユーザーがサービス上で実行する具体的なタスクを書き出す(選んだものを保存する、予約確認のメールを受信する)
3. サービスが提供すべき機能や情報をまとめる
4. ユーザーストーリーの大まかな流れを作る(調べる、比較する、予約する、評価する)
5. どれの機能から優先して開発していくかをみんなで考える
https://scrapbox.io/files/627df8acc5d570001d5f78ba.png
今週のまとめ
2022/5/13 16:53:39Mitsuzuka Rintaro.icon
今週はインプットだけになってしまったので、来週はアウトプットしていこうと思う。
ユーザーモデルを作ってみる
2022/5/18 18:00:00Mitsuzuka Rintaro.icon
整理
前回やったこと
アジャイルについてのまとめ
今回やること
前作ったブログアプリにユーザーモデルを考えてみる
参考にしたサイト
カスタムユーザーモデルとは
Djangoには標準のUserモデルが利用できる
django.contrib.auth.models.Userに定義
code:Django
username = models.CharField()
first_name = models.CharField()
last_name = models.CharField()
email = models.EmailField()
is_staff = models.BooleanField()
is_active = models.BooleanField()
date_joined = models.DateTimeField()
table: 標準のUserモデル
カラム名 説明
username ユーザー名
first_name 名前
last_name 苗字
email メールアドレス
is_staff 管理画面のアクセス可否
is_active ログインの可否
date_joined アカウントの作成日時
Djangoで独自のWebアプリを作るときに、合わせてUserモデルを設計する
例えばメールアドレスをログインに使いたい場合など
このサイトを参考に作成
ログイン機能を作る
この二つのサイトを参考に作ってみる
エラーが...😢
https://scrapbox.io/files/628749b9a4fb2a00232c5469.jpg
多分、単純なミスをしてると思う
現在、格闘中…
フィードバックお願いします!
2022/5/20 17:31:37Mitsuzuka Rintaro.icon
エラーの話、みた感じテンプレートがないって言われてるので、作ってないか置き場所間違えてるみたいな?
アジャイル調べてていいですね、私実際にやればいいやっておもってました。めっちゃ良い!(森本)
参考にしたサイト、コードが書いてあって復習しやすそうでいいなと思います!(森本)
整理
次やること
あやふやなDjangoについてどのように基礎を埋めていくかを考える
ログイン機能を完成させたい
ユーザーモデルを作ってみる
2022/5/25 18:00:00Mitsuzuka Rintaro.icon
整理
前回やったこと
前作ったブログアプリにユーザーモデルを考えてみる
今回やること
Djangoについて理解があやふやなところを埋める
参考にしたサイト
Djangoのディレクトリ構造
Djangoは
プロジェクト
アプリケーション
の二つのディレクトリに分けられる。
似たようなファイルがあって理解があやふやになってた。
プロジェクトディレクトリ
主にアプリケーション全体に関連する設定ファイルをまとめておくディレクトリ
アプリケーションディレクトリ
ウェブサービスに必要な機能を実装していくためのディレクトリ。
MVT構造
model
veiws
template
ひとつのDjangoプロジェクトには複数のアプリケーションを作成可能
この部分がうまく理解できなかった
こんな感じ↓
sample
├ project (Webアプリ全体の設定をする部分)
└ application (Webアプリの機能に関する部分)
URLマッピング
WebブラウザにアクセスするためのURL
どのアドレスにアクセスしたらどの処理内容を実行するか定義するのがここでの役割
アドレス管理方法
初めてチュートリアルをやった時、urls.pyを何回も書いて迷子になってたので整理する!
URLを管理する方法は2つあるらしい
プロジェクト管理フォルダ内でURL一元管理する方法
https://scrapbox.io/files/6290842b506a06001d49a843.jpg
この図がとっても分かりやすかった
アプリケーション管理フォルダ毎にURLを管理する方法
https://scrapbox.io/files/62903180c169110021133fa0.jpg
この図がとっても分かりやすかった
アプリケーションのアドレスは対象アプリケーションフォルダ内で管理することが原則
code:App/urls.py
from django.urls import path
from . import views
urlpatterns = [
path('', views.index, name='index'),
]
「' '」と書くとurls.pyが格納しているアプリケーション管理フォルダをサーバーにて動作させた際に、始めに処理が実行
code:Pro/urls.py
from django.contrib import admin
from django.urls import path
from django.urls import include
urlpatterns = [
path('admin/', admin.site.urls),
path('App/', include('App.urls')),
]
作成したアプリケーション管理フォルダ内のurls.pyと紐づける
localhost:8000/アプリケーション管理フォルダ名/
で確認できる
CTFに向けて勉強してみる
2022/6/1 18:00:00Mitsuzuka Rintaro.icon
整理
前回やったこと
Djangoのディレクトリ構造について知る
今回やること
参考にしたページ
CTFとは
Capture The Flag、旗取りゲームのことで、情報セキュリティのスキルを用いて隠された答えを見つけ出す競技!
CTFのジャンル
Crypto (Cryptography)
暗号に関する問題
Network
ネットワークに関する問題
Bin&Rev (Binary Exploitation&Reversing)
Binはバイナリファイルを解析する問題
Revはリバースエンジニアリングに関する問題
Web (Web Exploitation)
Webセキュリティに関する問題
クライアントサイド OR サーバーサイド
Pwn
プログラムの脆弱性をつく問題
Writes up : Web
まずはページにアクセス
https://scrapbox.io/files/6299705c19af6e001dcee1f3.jpg
IDはadminだとしてもパスワードが分からない
そこでSQLインジェクションする
データベースごとのSQLインジェクション方法
IDに「' or 1=1 --」を入れてみると
ダブルハイフンで後をすべてコメント扱いできる
https://scrapbox.io/files/62997307288c5d002316f2e0.jpg
フラグが出てくると思ったら出てこなかった
The flag is admin's password. らしい
SELECT * FROM user WHERE id='$id' AND pass='$pass'
調べてみたらブラインドSQLインジェクションという手法が有効らしい
SQL文を挿入して反応の違いを観察することでデータベースから情報を盗み出す
substrで文字を一文字ずつ抜き出しながら、パスワードのありそうな文字も一文字ずつチェックしていく方針
ページ遷移がいつもと異なるものになるまでチェックする
発表会用記事
2022/6/29 12:00:00Mitsuzuka Rintaro.icon
やったこと
Djangoの仕組みを理解すること
gitについて理解すること
アジャイルについて理解すること
Django
Djangoは
プロジェクト
アプリケーション
の二つのディレクトリに分けられる。
似たようなファイルがあって理解があやふやになってた。
プロジェクトディレクトリ
主にアプリケーション全体に関連する設定ファイルをまとめておくディレクトリ
アプリケーションディレクトリ
ウェブサービスに必要な機能を実装していくためのディレクトリ。
MVT構造
model
veiws
template
ひとつのDjangoプロジェクトには複数のアプリケーションを作成可能
この部分がうまく理解できなかった
こんな感じ↓
sample
├ project (Webアプリ全体の設定をする部分)
└ application (Webアプリの機能に関する部分)
URLマッピング
WebブラウザにアクセスするためのURL
どのアドレスにアクセスしたらどの処理内容を実行するか定義するのがここでの役割
アドレス管理方法
初めてチュートリアルをやった時、urls.pyを何回も書いて迷子になってたので整理する!
URLを管理する方法は2つあるらしい
プロジェクト管理フォルダ内でURL一元管理する方法
https://scrapbox.io/files/6290842b506a06001d49a843.jpg
この図がとっても分かりやすかった
アプリケーション管理フォルダ毎にURLを管理する方法
https://scrapbox.io/files/62903180c169110021133fa0.jpg
この図がとっても分かりやすかった
アプリケーションのアドレスは対象アプリケーションフォルダ内で管理することが原則
code:App/urls.py
from django.urls import path
from . import views
urlpatterns = [
path('', views.index, name='index'),
]
「' '」と書くとurls.pyが格納しているアプリケーション管理フォルダをサーバーにて動作させた際に、始めに処理が実行
code:Pro/urls.py
from django.contrib import admin
from django.urls import path
from django.urls import include
urlpatterns = [
path('admin/', admin.site.urls),
path('App/', include('App.urls')),
]
作成したアプリケーション管理フォルダ内のurls.pyと紐づける
localhost:8000/アプリケーション管理フォルダ名/
で確認できる
Git
ここに関しては自分でまとめたものよりもチームでまとめたGit手順書が分かりやすかった。
.gitignoreの書き方
code:.gitignore
# すべての.dbファイルを無視
*.db
# すべての.sqlite3ファイルを無視
*.sqlite3
# bin フォルダは要らない
bin/
# nuget.exe は必用なファイル
!/.nuget/nuget.exe
# パッケージフォルダ内の .ts ファイルは要らない
package/**/*.ts
無視設定を行いたいフォルダにおく
今回あとから追加しちゃったので、設定反映されなかった…
一回外のフォルダに移動させてから、また戻すと反映される!
ブランチの名前で悩んでたら、次の記事を見つけた
table:ブランチの命名規則
ブランチ名 役割 派生先 マージ先
master / main 公開するものを置くブランチ
develop 開発中のものを置くブランチ master master
release 次にリリースするものを置くブランチ develop develop, master
feature- 新機能開発中に使うブランチ develop develop
hotfix- 公開中のもののバグ修正用ブランチ master develop, master
いつも調べるのでメモ
アジャイル
アジャイルとは]
短いサイクルで開発とリリースを繰り返す
機能追加というよりも成果物が増えていく
ユーザーストーリーマッピング
開発を繰り返すアジャイル開発で、どのように優先順位をつけていくのか
ユーザーストーリーマッピングという手法があった
ユーザーストーリーを時系列と優先度に沿ってマッピングしたものです。
ユーザーストーリーマッピングの活用により、開発順序を適切に定められるため、メンバーにも情報を共有しやすくなります。
やり方
1. 左から右へ書いていく(時間)
2. 上から下へ優先順位高い順に書いていく
(例)
分類:ユーザーは電子メールを管理できる
アクティビティ(タスク):ユーザーは電子メールを作成できる、ユーザーは電子メールを読める、ユーザーは電子メールを削除できる
ユーザーストーリー(機能):ユーザーはプレインテキストの電子メールを送信できる、ユーザーはリッチテキストの電子メールを送信できる、ユーザーはHTMLの電子メールを送信できる
3. そして横に線を引いて最低限の機能群(MVP)を決める
自分がやりやすいと思った流れ
1. ペルソナを決めとく
サービス・商品の典型的なユーザー像のことで、マーケティングにおいて活用される概念
氏名
年齢
職業
住所
家族構成
年収
ライフスタイル
性格
価値感
悩み
使用しているSNS
2. ストーリーに沿ってユーザーがサービス上で実行する具体的なタスクを書き出す(選んだものを保存する、予約確認のメールを受信する)
3. サービスが提供すべき機能や情報をまとめる
4. ユーザーストーリーの大まかな流れを作る(調べる、比較する、予約する、評価する)
5. どれの機能から優先して開発していくかをみんなで考える
https://scrapbox.io/files/627df8acc5d570001d5f78ba.png
ふりかえり
Djangoで始めにアプリを作ってしまってその後、仕組みを丁寧に見ていけたことはよかった。
自分なりに機能を追加していくことまでは出来なかった
動かなくなってしまうことを恐れず、いろいろな実装をしてみればよかったと思った。
Gitを使いながら開発したら操作に慣れた。
授業で作ったGit手順書がわかりやすく、あとでふりかえろうと思う
アジャイルについて動画を見つつ自分なりの解釈をまとめてみたが、あまりイメージはわかなかった。
なんとなくの雰囲気はつかめたので、今後の活動でイメージを深めていければと思う。
あとで日誌を書こうと思っていたが、書くことを忘れてしまったことが多々あり
構造化をして、書くことを埋めるだけにするなど
日誌を自分なりに書きやすくする工夫をしたいと思った。
UserScript
Alt + t で任意のフォーマットの日付
code:script.js
scrapbox.TimeStamp.addFormat(() => new Date().toLocaleString())
ページの見出しを作るUserScript
code:script.js
import '/api/code/shokai/ページの見出しを作るUserScript/script.js'
小見出しをつくる
code:style.css
.line strong.level-3{
padding: 0.5em;/*文字周りの余白*/
font-size:1.3em
}
'#で始まるタグをラベル風にする
code:style.css
display: inline-block;
padding: 2px 8px;
margin: 0 8px 10px 0;
font-size: 0.8em;
border-radius: 3px;
transition: .3s;
-webkit-transform: scale(1);
transform: scale(1);
}
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
関連ページ一覧をページの横に表示する
code:style.css
@media (min-width: 768px) {
/* 要素横並び */
div.page-wrapper {
display: flex;
justify-content: space-around;
}
div.col-page {
max-width: calc(960px + 216px + 34px)
}
div.drag-and-drop-enter {
order: 2;
width: calc(100% - 250px);
}
div.related-page-list {
order: 1;
flex-basis: 216px;
padding: 0 8px;
}
/* 関連リンク一覧形状変更 */
div.related-page-list .grid li.relation-label,
div.related-page-list li.page-list-item,
div.related-page-list li.ellipsis {
/* サイズ変更(共通) */
width: 200px;
}
div.related-page-list .grid li.relation-label {
/* ラベルサイズ変更 */
height: auto;
margin-bottom: 2px;
}
div.related-page-list li.page-list-item,
div.related-page-list li.ellipsis {
/* カードサイズ変更 */
height: 50px;
margin-bottom: 3px;
}
div.related-page-list .grid li.relation-label .arrow {
display: none;
}
.related-page-list li.relation-label a {
/* 関連リンク ラベル */
display: flex !important;
padding: 0 !important;
}
.related-page-list li.relation-label a,
.related-page-list li.page-list-item a {
/* 関連リンク ラベル・カード(共通) */
border-radius: 0;
}
.related-page-list ul.grid:hover li.relation-label a,
.related-page-list div.links-2-hop ul.grid:hover li.relation-label a,
.related-page-list li.page-list-item a:hover {
/* 関連リンク ラベル・カード(共通、ホバー時) */
transition: 0s;
}
.related-page-list li.relation-label a:hover {
/* 関連リンク ラベル(ホバー時) */
filter: brightness(80%);
}
.related-page-list li.ellipsis a {
/* 2 hopが大きすぎるときに出る三点ボタン */
padding: 0;
}
.related-page-list li.ellipsis a div.circle {
/* 三点ボタンをホバーした時に表示される丸 */
height: auto;
}
.related-page-list span.kamon::before {
/* 鎖マークの大きさ */
font-size: 14px;
}
.related-page-list li.page-list-item .content > .description {
display: none;
}
.related-page-list li.relation-label a span.title,
.related-page-list ul.grid li.page-list-item a .header {
/* リンクのタイトル文字がある空間(共通) */
border-top: 0;
width: 158px;
padding: 7px 3px;
margin-left: 42px;
text-align: left;
}
.related-page-list li.relation-label a span.title {
/* リンクのタイトル文字がある空間(ラベル) */
padding: 0 3px;
}
.related-page-list ul.grid li.page-list-item a .header {
/* リンクのタイトル文字がある空間(カード) */
padding: 7px 3px;
}
.related-page-list li.relation-label a span.title,
.related-page-list ul.grid li.page-list-item a .header .title {
/* リンクのタイトル文字(共通) */
font-size: 14px;
font-weight: bold;
}
.related-page-list li.relation-label a:hover span.title,
.related-page-list ul.grid li.page-list-item a:hover .header .title {
/* リンクのタイトル文字(共通、ホバー時) */
transition: 0s;
}
.related-page-list li.relation-label a span.kamon.icon-lg,
.related-page-list ul.grid li.page-list-item a .icon {
/* リンクのアイコン */
display: flex;
position: absolute;
align-items: center;
justify-content: center;
width: 30px;
margin: 0;
margin-left: 6px;
padding: 0;
}
.related-page-list li.relation-label a span.kamon.icon-lg {
/* リンクのアイコン(ラベル) */
height: 100%;
}
.related-page-list ul.grid li.page-list-item a .icon {
/* リンクのアイコン(カード) */
height: 50px;
}
.related-page-list ul.grid li.splitter {
height: 5px;
}
}
しおりをつける
code:style.css
/* 栞一覧を出すページメニューボタンのスタイル -- ここは必要 */
a#Bookmarks.tool-btn:hover { text-decoration: none }
a#Bookmarks.tool-btn::before {
position: absolute; content: '\f02e'; font: 400 20px/46px 'Font Awesome 5 Free' }
a#Bookmarks.tool-btn img { opacity: 0 }
code:script.js
const __bkmClass = '.deco-\\.' /* ここで記法のセレクタを設定してね。デフォルトはドットです */
const __bkmMenuTitle = 'Bookmarks'
scrapbox.PageMenu.addMenu({ title: __bkmMenuTitle, image: '/assets/img/logo.png',
onClick: function() {
const __fixedHeaderHeight = ($('.navbar').css('position') == 'fixed' ? $('.navbar').height() : 0) +
($('.navbar-pagemenu').height() || 0)
scrapbox.PageMenu(__bkmMenuTitle).removeAllItems()
$(__bkmClass).closest('.line').each(function(i, e){
scrapbox.PageMenu(__bkmMenuTitle).addItem({
title: $(e).find(__bkmClass).text(),
onClick: function() {
$('html,body').animate({
scrollTop: $(e).offset().top - $('body').offset().top - __fixedHeaderHeight
}, 150)
}
})
})
}
})
箇条書きを控えめにする
code:style.css
/* 箇条書きを控えめにする */
.app .line .indent-mark .dot {
height: .2em; width: .4em; border-radius: 25%;
background-color: rgba(173,173,173,.55) }
.app:not(.presentation) .line .indent-mark .dot { top: auto; bottom: 0 }
背景を変える
code:style.css
body{
background-color:#e5eeee;
}